<template>
  <div class="book-order">
    <div style="font-size: 0">
      <img :src=ImgObj />
    </div>
    <div class="" v-if="book_list.length > 0">
      <BookListLoad :book_list="book_list" :is_vip='is_vip' v-on:selectBook="goChapter" v-if="showBooks"></BookListLoad>
    </div>
    <div class="null" v-if="book_list.length === 0">
      <div class="contens">
        <div><i class="iconfont icon-wodeshuji-kongbaiye"></i></div>
        <div>该书单下还未有任何书籍哦</div>
      </div>
    </div>
  </div>
</template>

<script>
    import BookListLoad from '../../components/BookListLoad/Index'
    import Banner from '../../components/Banner/index'
    export default {
        name: "index",
        data:function(){
          return{
            ImgObj: this.$route.query.recommend_cover||require('../../assets/img/bg.png'),
            book_list:[],
            is_vip:window.sessionStorage.getItem('ten_is_vip'),
            book_page_index:1,
            showBooks:false
          }
        },
        methods:{
          goChapter:function (item) {
            this.$router.push({
              name: 'Chapter',
              query: {
                book_id: item.book_id,
                platform_book_id:item.platform_book_id,
                recommend_type:2
              }
            })
          },
          // 调用获取书籍列表的接口
          getCategoryBooks:function(){
            // 查询书籍分类
            this.$axios.category_book({
              params:{
                category_id:this.$route.query.post_id,
                page_index:this.book_page_index,
                user_token:this.$Login.oauth_token.user_token
              }
            }).then(res=>{
              if(res.data.qing_code ===303){
                this.showBooks = true
                return
              }else{
                this.book_list = this.book_list.concat(res.data.qing_data)
                this.book_page_index++
                this.getCategoryBooks()
              }
            })
          }
        },
        mounted:function(){
          // 设置背景图
          // this.ImgObj = this.$route.query.recommend_cover
          // 展示书籍
          this.getCategoryBooks()
        },
        components: {
          BookListLoad,
          Banner
        }

    }
</script>

<style scoped>
  @import "../../assets/css/views/BookOrders/index.css";
</style>
